[Day19] jsES6語法-使用 let 與 const 宣告變數

Hoisting 差異

所先我們先複習一下 Hoisting ，就是變數和函數的宣告，會在編譯階段就被放進記憶體。今天如我們分別使用 let 和 var 宣告變數，並且在宣告前使用 consolo 顯示出變數，會發現使用 let 宣告的變數是 not defined，代表還沒有配置記憶體空間給這個變數，而使用 var 宣告的則是 undefined ，代表已經宣告記憶體給這個變數。

console.log(name1) //not defined
console.log(name2) //undefined
let name1 = 'Leo';
var name2 = 'Peter';

作用域差異

var 作用域是 function scope，let 作用域是 block。因此只要是我們在函數裡面用 var 宣告的變數都會有影響，像是如果我們在 show1 函數中使用 var 宣告兩次 name ，if 條件式裡面用 var 宣告的 name 也會影響原本使用 var 宣告的變數 name，因此 name 被改成了 Peter。但是如果我們是使用 let 宣告變數，像是 show2 函數，if 裡面使用 let 宣告的變數因為只在那個 if 條件的區塊(block) 產生作用，所以不會影響原本宣告的 name 變數，變數 name 還是 Leo。

function show1(){
    var name = 'Leo'
    if(true){
        var name = 'Peter'
    }
    console.log(name);
} // 顯示 peter
<!-- more -->
function show2(){
    let name = 'Leo'
    if(true){
        let name = 'Peter'
    }
    console.log(name);
} // 顯示 Leo

const 與物件用法

當我們使用 const 宣告變數後，此時這個變數就不能再次宣告，否則會出錯。但是如果我們使用 const 來宣告物件，我們可以修改 const 物件內的屬性值，而不會出錯。

const name = 'Leo';
name = 'Peter';

const family = {
    mom:'小美',
    father:'小明',
}
family.father = '爸爸';
console.log(family.father)
//物件傳參考